<template>
  <div class="app-container home" style="text-align:center; margin-top:100px;">
    <h1>欢迎使用税综合后台管理系统</h1>
    <div style="font-size: 22px; margin-top: 40px;">
      当前时间：<span>{{ now }}</span>
    </div>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted, onUnmounted } from 'vue'
const now = ref('')
let timer = null
function updateNow() {
  const d = new Date()
  now.value = d.getFullYear() + '-' + String(d.getMonth()+1).padStart(2,'0') + '-' + String(d.getDate()).padStart(2,'0') + ' ' + String(d.getHours()).padStart(2,'0') + ':' + String(d.getMinutes()).padStart(2,'0') + ':' + String(d.getSeconds()).padStart(2,'0')
}
onMounted(() => {
  updateNow()
  timer = setInterval(updateNow, 1000)
})
onUnmounted(() => {
  if (timer) clearInterval(timer)
})
</script>

<style scoped lang="scss">
.home {
  h1 {
    font-size: 38px;
    font-weight: bold;
    margin-bottom: 30px;
  }
  div {
    font-size: 22px;
  }
}
</style>

